<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .red {
            color: red;
        }
        
        .green {
            color: green;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 v-bind:class="cl" v-if='seen' v-on:mouseover=reverseTitle>{{title}}</h1>
        <ol>
            <li v-for='list in lists'>
                {{list}}
            </li>
        </ol>
        <form action="#">
            <fieldset>
                <legend>输入用户信息</legend>
                姓名：<input type="text" value="kk" autofocus v-model='user' />
                <p></p>
                年龄：<input type="number" value="12" v-model='age' />
                <br>
                <button>提交</button>
            </fieldset>
        </form>
        <table border="1">
            <caption>展示</caption>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>{{user}}</td>
                <td>{{age}}</td>
            </tr>
        </table>
        <!--
            ？？？组件化应用构建
        -->
        <ol>
            <!-- 创建一个 todo-item 组件的实例 -->
            <todo-item v-for='item in groceryList' v-bind:todo='item'></todo-item>
        </ol>
    </div>



    <script>
        var app = new Vue({
            el: '#app', //标签选择器
            data: {
                title: 'HELLO WORLD',
                cl: 'red',
                seen: 'true',
                lists: [1, 2, 3],
                user: 'kk',
                age: 12,
                groceryList:[
                    {text:'蔬菜'},
                    {text:'青椒'},
                    {text:'黄瓜'}
                ]
            },
            methods: {
                reverseTitle: function () {
                    this.title = this.title.split('').reverse().join('')
                }
            }
        })
        // 组件化应用构建 component:成分
        // 定义名为 todo-item 的新组件
        Vue.component('todo-item', {
            props:['todo'],
            template: '<li>{{todo.text}}</li>'
        })

    </script>
</body>

</html>